import React from 'react';
import { TabC, FirstHeaderC, PrimaryC, PrimaryTextC } from '../../components';

class TabsC extends React.Component {
  state = {
    tabType: '1',
    tabType1: '1',
    tabType2: '1',
    tabType3: '1',
    tabType4: '1',
    tabType5: '1',
    tabType6: '2',
    tabSource: [
      { title: '场外基金', key: '1', content: '111' },
      { title: '存款', key: '2', content: '222' },
    ],
  };

  // tab bar上额外的元素
  rightButton = () => {
    return (
      <div>
        <PrimaryC title='查询' onClick={() => console.log('dianji')} />
        <PrimaryTextC title='查询' onClick={() => console.log('dianji')} />
      </div>
    );
  };

  secHtml = () => {
    return (
      <div>
        <TabC
          type='secondTab'
          tabSource={[
            { title: '包含三级', key: '1', content: this.thrHtml() },
            { title: '存款', key: '2', content: '222' },
          ]}
          activeKey={this.state.tabType4}
          onChange={(key) => {
            this.setState({
              tabType4: key,
            });
          }}
        />
      </div>
    );
  };

  thrHtml = () => {
    return (
      <div>
        <TabC
          type='threeTab'
          tabSource={[
            { title: '场外基金', key: '1', content: '111' },
            { title: '交易所回购', key: '3', content: '333' },
          ]}
          activeKey={this.state.tabType5}
          onChange={(key) => {
            this.setState({
              tabType5: key,
            });
          }}
          tabBarExtraContent={this.rightButton()}
        />
      </div>
    );
  };

  render() {
    return (
      <div style={{ padding: '20px 20px 100px 20px' }}>
        <FirstHeaderC title='一级tab' />
        <TabC
          tabSource={[
            { title: '场外基金', key: '1', content: '111' },
            { title: '存款', key: '2', content: '222' },
          ]}
          activeKey={this.state.tabType}
          onChange={(key) => {
            this.setState({
              tabType: key,
            });
          }}
        />
        <FirstHeaderC title='二级tab' bottomHeight={false} topHeight={true} />
        <TabC
          type='secondTab'
          tabSource={[
            { title: '场外基金', key: '1', content: '111' },
            { title: '存款', key: '2', content: '222' },
          ]}
          activeKey={this.state.tabType1}
          onChange={(key) => {
            this.setState({
              tabType1: key,
            });
          }}
        />
        <FirstHeaderC title='三级tab' topHeight={true} />
        <TabC
          type='threeTab'
          tabSource={[
            { title: '场外基金', key: '1', content: '111' },
            { title: '交易所回购', key: '3', content: '333' },
          ]}
          activeKey={this.state.tabType2}
          onChange={(key) => {
            this.setState({
              tabType2: key,
            });
          }}
        />
        <FirstHeaderC title='一级、二级、三级' topHeight={true} />
        <TabC
          tabSource={[
            { title: '包含二级', key: '1', content: this.secHtml() },
            { title: '交易所回购', key: '2', content: '222' },
          ]}
          activeKey={this.state.tabType}
          bottomHeight={false}
          onChange={(key) => {
            this.setState({
              tabType: key,
            });
          }}
        />
        <FirstHeaderC title='一级tab，可关闭tab页' topHeight={true} />
        <TabC
          tabSource={this.state.tabSource}
          activeKey={this.state.tabType3}
          onChange={(key) => {
            this.setState({
              tabType3: key,
            });
          }}
          onEdit={(key) => {
            const arr = [...this.state.tabSource];
            const tarIndex = arr.findIndex((item) => item.key === key);
            arr.splice(tarIndex, 1);
            this.setState({
              tabSource: arr,
              tabType3: arr[0]?.key,
            });
          }}
          closable={true}
        />
        <FirstHeaderC title='其他参数测试' topHeight={true} />
        <TabC
          tabSource={[
            { title: '场外基金', key: '1', content: '111' },
            { title: '存款', key: '2', content: '222' },
          ]}
          tabBarGutter={50}
          tabBarStyle={{ width: '1000px' }}
          activeKey={this.state.tabType6}
          onChange={(key) => {
            this.setState({
              tabType6: key,
            });
          }}
        />
      </div>
    );
  }
}

export default TabsC;
